<template>
  <el-container style="display: flex; height: 100vh;">
    <el-aside width="200px" style="height: 100%; background-color: #D3DCE6; position: relative;">
      <el-menu :default-active="activeIndex" @select="handleSelect" style="margin-top: 20px;">
        <!-- 修改后的护理信息菜单 -->
        <template v-if="authority === '超级用户'">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>回访信息</span>
            </template>
            <el-menu-item index="1-1-1" class="custom-sub-menu-item">造口护理</el-menu-item>
            <el-menu-item index="1-1-2" class="custom-sub-menu-item">前列腺癌</el-menu-item>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item
              :index="authority === '造口护理' ? '1-1-1' : '1-1-2'"
          >
            <el-icon><location /></el-icon>
            <span>护理信息</span>
          </el-menu-item>
        </template>

        <!-- 其他菜单项保持不变 -->
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span>数据预警</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span>问题咨询</span>
        </el-menu-item>

        <!-- 新增：宣教信息（仅非超级用户显示） -->
        <el-menu-item
            index="7"
            v-if="authority !== '超级用户'"
        >
          <i class="el-icon-message"></i>
          <span>宣教信息</span>
        </el-menu-item>

        <el-menu-item index="4">
          <i class="el-icon-user"></i>
          <span>住院号管理</span>
        </el-menu-item>
        <el-menu-item v-if="authority === '超级用户'" index="5">
          <i class="el-icon-lock"></i>
          <span>用户管理</span>
        </el-menu-item>

        <el-menu-item index="6">
          <i class="el-icon-cycle"></i>
          <span>回访周期提醒</span>
        </el-menu-item>
      </el-menu>

      <!-- 添加在左下角的返回登录按钮 -->
      <el-button
          type="primary"
          @click="goToLogin"
          style="position: absolute; bottom: 40px; left: 35px; width: 120px;"
      >
        返回登录
      </el-button>
    </el-aside>

    <!-- 其余部分保持不变 -->
    <el-container style="flex: 1; display: flex; flex-direction: column;">
      <el-header style="flex: 0 0 5%;">
        <div v-if="activeIndex === '1-1-1'">造口护理</div>
        <div v-if="activeIndex === '1-1-2'">前列腺癌</div>
        <div v-if="activeIndex === '2'">数据预警</div>
        <div v-if="activeIndex === '3'">问题咨询</div>
        <div v-if="activeIndex === '4'">住院号管理</div>
        <div v-if="activeIndex === '5'">用户管理</div>
        <div v-if="activeIndex === '6'">回访周期提醒</div>
        <!-- 新增：宣教信息标题 -->
        <div v-if="activeIndex === '7'">宣教信息</div>
      </el-header>
      <el-main style="flex: 1;">
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NurseInfo from './components/NurseInfo.vue';
import ProstateCancer from './components/ProstateCancer.vue';
import PatientException from './components/PatientException.vue';
import Question from './components/Question.vue';
import PatientControl from './components/PatientControl.vue';
import AuthoritySet from './components/AuthoritySet.vue';
import RevisitRemind from './components/RevisitRemind.vue';
// 导入宣教信息组件（请确保该组件已创建）
import MissionInfo from './components/Xuanjiaoxinxi.vue';
import { useRouter } from 'vue-router';

export default {
  components: {
    NurseInfo,
    ProstateCancer,
    PatientException,
    Question,
    PatientControl,
    AuthoritySet,
    RevisitRemind,
    MissionInfo // 注册宣教信息组件
  },
  data() {
    return {
      activeIndex: '1',
      currentComponent: 'NurseInfo',
      authority: localStorage.getItem('authority')
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      console.log(`Selected menu item: ${index}`);
      switch (index) {
        case '1-1-1':
          this.currentComponent = 'NurseInfo';
          break;
        case '1-1-2':
          this.currentComponent = 'ProstateCancer';
          break;
        case '2':
          this.currentComponent = 'PatientException';
          break;
        case '3':
          this.currentComponent = 'Question';
          break;
          // 新增：宣教信息组件切换
        case '7':
          this.currentComponent = 'MissionInfo';
          break;
        case '4':
          this.currentComponent = 'PatientControl';
          break;
        case '5':
          this.currentComponent = 'AuthoritySet';
          break;
        case '6':
          this.currentComponent = 'RevisitRemind'
          break
        default:
          this.currentComponent = 'NurseInfo';
      }
    },
    goToLogin() {
      this.$router.push('/');
    }
  },
  created() {
    if (this.authority !== '超级用户') {
      this.activeIndex = this.authority === '造口护理' ? '1-1-1' : '1-1-2';
    }
    this.handleSelect(this.activeIndex);
  }
};
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.el-menu {
  width: 100%;
  border-right: none;
  background-color: #D3DCE6;
}

.el-menu-item {
  margin: 0;
}
.custom-sub-menu-item {
  padding-left: 60px !important;
}
</style>